Module styles/layout

autoGrid: ((compoundMap?: { alignX?: "normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | Responsive<"normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline", { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { baseline?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean } | Responsive<{ baseline?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; alignY?: "normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | Responsive<"normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline", { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { baseline?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean } | Responsive<{ baseline?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; default?: null | string | number | boolean | Responsive<null | string | number | boolean, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; distributeX?: "normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | "around" | "between" | "evenly" | Responsive<"normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | "around" | "between" | "evenly", { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { around?: null | string | number | boolean; baseline?: null | string | number | boolean; between?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; evenly?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean } | Responsive<{ around?: null | string | number | boolean; baseline?: null | string | number | boolean; between?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; evenly?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; distributeY?: "normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | "around" | "between" | "evenly" | Responsive<"normal" | Falsy | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | "around" | "between" | "evenly", { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { around?: null | string | number | boolean; baseline?: null | string | number | boolean; between?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; evenly?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean } | Responsive<{ around?: null | string | number | boolean; baseline?: null | string | number | boolean; between?: null | string | number | boolean; center?: null | string | number | boolean; end?: null | string | number | boolean; evenly?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; normal?: null | string | number | boolean; revert?: null | string | number | boolean; start?: null | string | number | boolean; stretch?: null | string | number | boolean; unset?: null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; gap?: 300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900" | [300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900", 300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900"] | Responsive<300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900" | [300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900", 300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900"], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; inline?: null | string | number | boolean | Responsive<null | string | number | boolean, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; itemWidth?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; rows?: number | (string | number)[] | Responsive<number | (string | number)[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> }, compoundOptions?: CompoundStylesOptions) => string) & { styles: { alignX: ResponsiveStyle<"normal" | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; alignY: ResponsiveStyle<"normal" | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; default: ResponsiveOne<{ hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; distributeX: ResponsiveStyle<"normal" | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | "around" | "between" | "evenly", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; distributeY: ResponsiveStyle<"normal" | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "start" | "baseline" | "around" | "between" | "evenly", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; gap: ResponsiveLazy<300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900" | [300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900", 300 | -300 | 200 | -200 | 100 | -100 | 400 | -400 | 500 | -500 | 600 | -600 | 700 | -700 | 800 | -800 | 900 | -900 | "auto" | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | "-em100" | "-em200" | "-em300" | "-em400" | "-em500" | "-em600" | "-em700" | "-em800" | "-em900"], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; inline: ResponsiveOne<{ hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; itemWidth: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; rows: ResponsiveLazy<number | (string | number)[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> }; atomicCss: any; css: any }

bleed: ((compoundMap?: { amount?: 300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | (300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900")[] | Responsive<300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | (300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900")[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; bg?: "transparent" | "primary" | "current" | "black" | "white" | "rose50" | "rose100" | "rose200" | "rose300" | "rose400" | "rose500" | "rose600" | "rose700" | "rose800" | "rose900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "fuchsia50" | "fuchsia100" | "fuchsia200" | "fuchsia300" | "fuchsia400" | "fuchsia500" | "fuchsia600" | "fuchsia700" | "fuchsia800" | "fuchsia900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "lightBlue50" | "lightBlue100" | "lightBlue200" | "lightBlue300" | "lightBlue400" | "lightBlue500" | "lightBlue600" | "lightBlue700" | "lightBlue800" | "lightBlue900" | "cyan50" | "cyan100" | "cyan200" | "cyan300" | "cyan400" | "cyan500" | "cyan600" | "cyan700" | "cyan800" | "cyan900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "emerald50" | "emerald100" | "emerald200" | "emerald300" | "emerald400" | "emerald500" | "emerald600" | "emerald700" | "emerald800" | "emerald900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "lime50" | "lime100" | "lime200" | "lime300" | "lime400" | "lime500" | "lime600" | "lime700" | "lime800" | "lime900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "amber50" | "amber100" | "amber200" | "amber300" | "amber400" | "amber500" | "amber600" | "amber700" | "amber800" | "amber900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "warmGray50" | "warmGray100" | "warmGray200" | "warmGray300" | "warmGray400" | "warmGray500" | "warmGray600" | "warmGray700" | "warmGray800" | "warmGray900" | "trueGray50" | "trueGray100" | "trueGray200" | "trueGray300" | "trueGray400" | "trueGray500" | "trueGray600" | "trueGray700" | "trueGray800" | "trueGray900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "coolGray50" | "coolGray100" | "coolGray200" | "coolGray300" | "coolGray400" | "coolGray500" | "coolGray600" | "coolGray700" | "coolGray800" | "coolGray900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "border" | Falsy | "bodyBg" | "accent" | "secondary" | "text" | "text500" | "text400" | Responsive<"transparent" | "primary" | "current" | "black" | "white" | "rose50" | "rose100" | "rose200" | "rose300" | "rose400" | "rose500" | "rose600" | "rose700" | "rose800" | "rose900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "fuchsia50" | "fuchsia100" | "fuchsia200" | "fuchsia300" | "fuchsia400" | "fuchsia500" | "fuchsia600" | "fuchsia700" | "fuchsia800" | "fuchsia900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "lightBlue50" | "lightBlue100" | "lightBlue200" | "lightBlue300" | "lightBlue400" | "lightBlue500" | "lightBlue600" | "lightBlue700" | "lightBlue800" | "lightBlue900" | "cyan50" | "cyan100" | "cyan200" | "cyan300" | "cyan400" | "cyan500" | "cyan600" | "cyan700" | "cyan800" | "cyan900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "emerald50" | "emerald100" | "emerald200" | "emerald300" | "emerald400" | "emerald500" | "emerald600" | "emerald700" | "emerald800" | "emerald900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "lime50" | "lime100" | "lime200" | "lime300" | "lime400" | "lime500" | "lime600" | "lime700" | "lime800" | "lime900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "amber50" | "amber100" | "amber200" | "amber300" | "amber400" | "amber500" | "amber600" | "amber700" | "amber800" | "amber900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "warmGray50" | "warmGray100" | "warmGray200" | "warmGray300" | "warmGray400" | "warmGray500" | "warmGray600" | "warmGray700" | "warmGray800" | "warmGray900" | "trueGray50" | "trueGray100" | "trueGray200" | "trueGray300" | "trueGray400" | "trueGray500" | "trueGray600" | "trueGray700" | "trueGray800" | "trueGray900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "coolGray50" | "coolGray100" | "coolGray200" | "coolGray300" | "coolGray400" | "coolGray500" | "coolGray600" | "coolGray700" | "coolGray800" | "coolGray900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "border" | Falsy | "bodyBg" | "accent" | "secondary" | "text" | "text500" | "text400", { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { accent: undefined | null | string | number | boolean; amber100: undefined | null | string | number | boolean; amber200: undefined | null | string | number | boolean; amber300: undefined | null | string | number | boolean; amber400: undefined | null | string | number | boolean; amber50: undefined | null | string | number | boolean; amber500: undefined | null | string | number | boolean; amber600: undefined | null | string | number | boolean; amber700: undefined | null | string | number | boolean; amber800: undefined | null | string | number | boolean; amber900: undefined | null | string | number | boolean; black: undefined | null | string | number | boolean; blue100: undefined | null | string | number | boolean; blue200: undefined | null | string | number | boolean; blue300: undefined | null | string | number | boolean; blue400: undefined | null | string | number | boolean; blue50: undefined | null | string | number | boolean; blue500: undefined | null | string | number | boolean; blue600: undefined | null | string | number | boolean; blue700: undefined | null | string | number | boolean; blue800: undefined | null | string | number | boolean; blue900: undefined | null | string | number | boolean; blueGray100: undefined | null | string | number | boolean; blueGray200: undefined | null | string | number | boolean; blueGray300: undefined | null | string | number | boolean; blueGray400: undefined | null | string | number | boolean; blueGray50: undefined | null | string | number | boolean; blueGray500: undefined | null | string | number | boolean; blueGray600: undefined | null | string | number | boolean; blueGray700: undefined | null | string | number | boolean; blueGray800: undefined | null | string | number | boolean; blueGray900: undefined | null | string | number | boolean; bodyBg: undefined | null | string | number | boolean; border: undefined | null | string | number | boolean; coolGray100: undefined | null | string | number | boolean; coolGray200: undefined | null | string | number | boolean; coolGray300: undefined | null | string | number | boolean; coolGray400: undefined | null | string | number | boolean; coolGray50: undefined | null | string | number | boolean; coolGray500: undefined | null | string | number | boolean; coolGray600: undefined | null | string | number | boolean; coolGray700: undefined | null | string | number | boolean; coolGray800: undefined | null | string | number | boolean; coolGray900: undefined | null | string | number | boolean; current: undefined | null | string | number | boolean; cyan100: undefined | null | string | number | boolean; cyan200: undefined | null | string | number | boolean; cyan300: undefined | null | string | number | boolean; cyan400: undefined | null | string | number | boolean; cyan50: undefined | null | string | number | boolean; cyan500: undefined | null | string | number | boolean; cyan600: undefined | null | string | number | boolean; cyan700: undefined | null | string | number | boolean; cyan800: undefined | null | string | number | boolean; cyan900: undefined | null | string | number | boolean; emerald100: undefined | null | string | number | boolean; emerald200: undefined | null | string | number | boolean; emerald300: undefined | null | string | number | boolean; emerald400: undefined | null | string | number | boolean; emerald50: undefined | null | string | number | boolean; emerald500: undefined | null | string | number | boolean; emerald600: undefined | null | string | number | boolean; emerald700: undefined | null | string | number | boolean; emerald800: undefined | null | string | number | boolean; emerald900: undefined | null | string | number | boolean; fuchsia100: undefined | null | string | number | boolean; fuchsia200: undefined | null | string | number | boolean; fuchsia300: undefined | null | string | number | boolean; fuchsia400: undefined | null | string | number | boolean; fuchsia50: undefined | null | string | number | boolean; fuchsia500: undefined | null | string | number | boolean; fuchsia600: undefined | null | string | number | boolean; fuchsia700: undefined | null | string | number | boolean; fuchsia800: undefined | null | string | number | boolean; fuchsia900: undefined | null | string | number | boolean; gray100: undefined | null | string | number | boolean; gray200: undefined | null | string | number | boolean; gray300: undefined | null | string | number | boolean; gray400: undefined | null | string | number | boolean; gray50: undefined | null | string | number | boolean; gray500: undefined | null | string | number | boolean; gray600: undefined | null | string | number | boolean; gray700: undefined | null | string | number | boolean; gray800: undefined | null | string | number | boolean; gray900: undefined | null | string | number | boolean; green100: undefined | null | string | number | boolean; green200: undefined | null | string | number | boolean; green300: undefined | null | string | number | boolean; green400: undefined | null | string | number | boolean; green50: undefined | null | string | number | boolean; green500: undefined | null | string | number | boolean; green600: undefined | null | string | number | boolean; green700: undefined | null | string | number | boolean; green800: undefined | null | string | number | boolean; green900: undefined | null | string | number | boolean; indigo100: undefined | null | string | number | boolean; indigo200: undefined | null | string | number | boolean; indigo300: undefined | null | string | number | boolean; indigo400: undefined | null | string | number | boolean; indigo50: undefined | null | string | number | boolean; indigo500: undefined | null | string | number | boolean; indigo600: undefined | null | string | number | boolean; indigo700: undefined | null | string | number | boolean; indigo800: undefined | null | string | number | boolean; indigo900: undefined | null | string | number | boolean; lightBlue100: undefined | null | string | number | boolean; lightBlue200: undefined | null | string | number | boolean; lightBlue300: undefined | null | string | number | boolean; lightBlue400: undefined | null | string | number | boolean; lightBlue50: undefined | null | string | number | boolean; lightBlue500: undefined | null | string | number | boolean; lightBlue600: undefined | null | string | number | boolean; lightBlue700: undefined | null | string | number | boolean; lightBlue800: undefined | null | string | number | boolean; lightBlue900: undefined | null | string | number | boolean; lime100: undefined | null | string | number | boolean; lime200: undefined | null | string | number | boolean; lime300: undefined | null | string | number | boolean; lime400: undefined | null | string | number | boolean; lime50: undefined | null | string | number | boolean; lime500: undefined | null | string | number | boolean; lime600: undefined | null | string | number | boolean; lime700: undefined | null | string | number | boolean; lime800: undefined | null | string | number | boolean; lime900: undefined | null | string | number | boolean; orange100: undefined | null | string | number | boolean; orange200: undefined | null | string | number | boolean; orange300: undefined | null | string | number | boolean; orange400: undefined | null | string | number | boolean; orange50: undefined | null | string | number | boolean; orange500: undefined | null | string | number | boolean; orange600: undefined | null | string | number | boolean; orange700: undefined | null | string | number | boolean; orange800: undefined | null | string | number | boolean; orange900: undefined | null | string | number | boolean; pink100: undefined | null | string | number | boolean; pink200: undefined | null | string | number | boolean; pink300: undefined | null | string | number | boolean; pink400: undefined | null | string | number | boolean; pink50: undefined | null | string | number | boolean; pink500: undefined | null | string | number | boolean; pink600: undefined | null | string | number | boolean; pink700: undefined | null | string | number | boolean; pink800: undefined | null | string | number | boolean; pink900: undefined | null | string | number | boolean; primary: undefined | null | string | number | boolean; purple100: undefined | null | string | number | boolean; purple200: undefined | null | string | number | boolean; purple300: undefined | null | string | number | boolean; purple400: undefined | null | string | number | boolean; purple50: undefined | null | string | number | boolean; purple500: undefined | null | string | number | boolean; purple600: undefined | null | string | number | boolean; purple700: undefined | null | string | number | boolean; purple800: undefined | null | string | number | boolean; purple900: undefined | null | string | number | boolean; red100: undefined | null | string | number | boolean; red200: undefined | null | string | number | boolean; red300: undefined | null | string | number | boolean; red400: undefined | null | string | number | boolean; red50: undefined | null | string | number | boolean; red500: undefined | null | string | number | boolean; red600: undefined | null | string | number | boolean; red700: undefined | null | string | number | boolean; red800: undefined | null | string | number | boolean; red900: undefined | null | string | number | boolean; rose100: undefined | null | string | number | boolean; rose200: undefined | null | string | number | boolean; rose300: undefined | null | string | number | boolean; rose400: undefined | null | string | number | boolean; rose50: undefined | null | string | number | boolean; rose500: undefined | null | string | number | boolean; rose600: undefined | null | string | number | boolean; rose700: undefined | null | string | number | boolean; rose800: undefined | null | string | number | boolean; rose900: undefined | null | string | number | boolean; secondary: undefined | null | string | number | boolean; teal100: undefined | null | string | number | boolean; teal200: undefined | null | string | number | boolean; teal300: undefined | null | string | number | boolean; teal400: undefined | null | string | number | boolean; teal50: undefined | null | string | number | boolean; teal500: undefined | null | string | number | boolean; teal600: undefined | null | string | number | boolean; teal700: undefined | null | string | number | boolean; teal800: undefined | null | string | number | boolean; teal900: undefined | null | string | number | boolean; text: undefined | null | string | number | boolean; text400: undefined | null | string | number | boolean; text500: undefined | null | string | number | boolean; transparent: undefined | null | string | number | boolean; trueGray100: undefined | null | string | number | boolean; trueGray200: undefined | null | string | number | boolean; trueGray300: undefined | null | string | number | boolean; trueGray400: undefined | null | string | number | boolean; trueGray50: undefined | null | string | number | boolean; trueGray500: undefined | null | string | number | boolean; trueGray600: undefined | null | string | number | boolean; trueGray700: undefined | null | string | number | boolean; trueGray800: undefined | null | string | number | boolean; trueGray900: undefined | null | string | number | boolean; violet100: undefined | null | string | number | boolean; violet200: undefined | null | string | number | boolean; violet300: undefined | null | string | number | boolean; violet400: undefined | null | string | number | boolean; violet50: undefined | null | string | number | boolean; violet500: undefined | null | string | number | boolean; violet600: undefined | null | string | number | boolean; violet700: undefined | null | string | number | boolean; violet800: undefined | null | string | number | boolean; violet900: undefined | null | string | number | boolean; warmGray100: undefined | null | string | number | boolean; warmGray200: undefined | null | string | number | boolean; warmGray300: undefined | null | string | number | boolean; warmGray400: undefined | null | string | number | boolean; warmGray50: undefined | null | string | number | boolean; warmGray500: undefined | null | string | number | boolean; warmGray600: undefined | null | string | number | boolean; warmGray700: undefined | null | string | number | boolean; warmGray800: undefined | null | string | number | boolean; warmGray900: undefined | null | string | number | boolean; white: undefined | null | string | number | boolean; yellow100: undefined | null | string | number | boolean; yellow200: undefined | null | string | number | boolean; yellow300: undefined | null | string | number | boolean; yellow400: undefined | null | string | number | boolean; yellow50: undefined | null | string | number | boolean; yellow500: undefined | null | string | number | boolean; yellow600: undefined | null | string | number | boolean; yellow700: undefined | null | string | number | boolean; yellow800: undefined | null | string | number | boolean; yellow900: undefined | null | string | number | boolean } | Responsive<{ accent: undefined | null | string | number | boolean; amber100: undefined | null | string | number | boolean; amber200: undefined | null | string | number | boolean; amber300: undefined | null | string | number | boolean; amber400: undefined | null | string | number | boolean; amber50: undefined | null | string | number | boolean; amber500: undefined | null | string | number | boolean; amber600: undefined | null | string | number | boolean; amber700: undefined | null | string | number | boolean; amber800: undefined | null | string | number | boolean; amber900: undefined | null | string | number | boolean; black: undefined | null | string | number | boolean; blue100: undefined | null | string | number | boolean; blue200: undefined | null | string | number | boolean; blue300: undefined | null | string | number | boolean; blue400: undefined | null | string | number | boolean; blue50: undefined | null | string | number | boolean; blue500: undefined | null | string | number | boolean; blue600: undefined | null | string | number | boolean; blue700: undefined | null | string | number | boolean; blue800: undefined | null | string | number | boolean; blue900: undefined | null | string | number | boolean; blueGray100: undefined | null | string | number | boolean; blueGray200: undefined | null | string | number | boolean; blueGray300: undefined | null | string | number | boolean; blueGray400: undefined | null | string | number | boolean; blueGray50: undefined | null | string | number | boolean; blueGray500: undefined | null | string | number | boolean; blueGray600: undefined | null | string | number | boolean; blueGray700: undefined | null | string | number | boolean; blueGray800: undefined | null | string | number | boolean; blueGray900: undefined | null | string | number | boolean; bodyBg: undefined | null | string | number | boolean; border: undefined | null | string | number | boolean; coolGray100: undefined | null | string | number | boolean; coolGray200: undefined | null | string | number | boolean; coolGray300: undefined | null | string | number | boolean; coolGray400: undefined | null | string | number | boolean; coolGray50: undefined | null | string | number | boolean; coolGray500: undefined | null | string | number | boolean; coolGray600: undefined | null | string | number | boolean; coolGray700: undefined | null | string | number | boolean; coolGray800: undefined | null | string | number | boolean; coolGray900: undefined | null | string | number | boolean; current: undefined | null | string | number | boolean; cyan100: undefined | null | string | number | boolean; cyan200: undefined | null | string | number | boolean; cyan300: undefined | null | string | number | boolean; cyan400: undefined | null | string | number | boolean; cyan50: undefined | null | string | number | boolean; cyan500: undefined | null | string | number | boolean; cyan600: undefined | null | string | number | boolean; cyan700: undefined | null | string | number | boolean; cyan800: undefined | null | string | number | boolean; cyan900: undefined | null | string | number | boolean; emerald100: undefined | null | string | number | boolean; emerald200: undefined | null | string | number | boolean; emerald300: undefined | null | string | number | boolean; emerald400: undefined | null | string | number | boolean; emerald50: undefined | null | string | number | boolean; emerald500: undefined | null | string | number | boolean; emerald600: undefined | null | string | number | boolean; emerald700: undefined | null | string | number | boolean; emerald800: undefined | null | string | number | boolean; emerald900: undefined | null | string | number | boolean; fuchsia100: undefined | null | string | number | boolean; fuchsia200: undefined | null | string | number | boolean; fuchsia300: undefined | null | string | number | boolean; fuchsia400: undefined | null | string | number | boolean; fuchsia50: undefined | null | string | number | boolean; fuchsia500: undefined | null | string | number | boolean; fuchsia600: undefined | null | string | number | boolean; fuchsia700: undefined | null | string | number | boolean; fuchsia800: undefined | null | string | number | boolean; fuchsia900: undefined | null | string | number | boolean; gray100: undefined | null | string | number | boolean; gray200: undefined | null | string | number | boolean; gray300: undefined | null | string | number | boolean; gray400: undefined | null | string | number | boolean; gray50: undefined | null | string | number | boolean; gray500: undefined | null | string | number | boolean; gray600: undefined | null | string | number | boolean; gray700: undefined | null | string | number | boolean; gray800: undefined | null | string | number | boolean; gray900: undefined | null | string | number | boolean; green100: undefined | null | string | number | boolean; green200: undefined | null | string | number | boolean; green300: undefined | null | string | number | boolean; green400: undefined | null | string | number | boolean; green50: undefined | null | string | number | boolean; green500: undefined | null | string | number | boolean; green600: undefined | null | string | number | boolean; green700: undefined | null | string | number | boolean; green800: undefined | null | string | number | boolean; green900: undefined | null | string | number | boolean; indigo100: undefined | null | string | number | boolean; indigo200: undefined | null | string | number | boolean; indigo300: undefined | null | string | number | boolean; indigo400: undefined | null | string | number | boolean; indigo50: undefined | null | string | number | boolean; indigo500: undefined | null | string | number | boolean; indigo600: undefined | null | string | number | boolean; indigo700: undefined | null | string | number | boolean; indigo800: undefined | null | string | number | boolean; indigo900: undefined | null | string | number | boolean; lightBlue100: undefined | null | string | number | boolean; lightBlue200: undefined | null | string | number | boolean; lightBlue300: undefined | null | string | number | boolean; lightBlue400: undefined | null | string | number | boolean; lightBlue50: undefined | null | string | number | boolean; lightBlue500: undefined | null | string | number | boolean; lightBlue600: undefined | null | string | number | boolean; lightBlue700: undefined | null | string | number | boolean; lightBlue800: undefined | null | string | number | boolean; lightBlue900: undefined | null | string | number | boolean; lime100: undefined | null | string | number | boolean; lime200: undefined | null | string | number | boolean; lime300: undefined | null | string | number | boolean; lime400: undefined | null | string | number | boolean; lime50: undefined | null | string | number | boolean; lime500: undefined | null | string | number | boolean; lime600: undefined | null | string | number | boolean; lime700: undefined | null | string | number | boolean; lime800: undefined | null | string | number | boolean; lime900: undefined | null | string | number | boolean; orange100: undefined | null | string | number | boolean; orange200: undefined | null | string | number | boolean; orange300: undefined | null | string | number | boolean; orange400: undefined | null | string | number | boolean; orange50: undefined | null | string | number | boolean; orange500: undefined | null | string | number | boolean; orange600: undefined | null | string | number | boolean; orange700: undefined | null | string | number | boolean; orange800: undefined | null | string | number | boolean; orange900: undefined | null | string | number | boolean; pink100: undefined | null | string | number | boolean; pink200: undefined | null | string | number | boolean; pink300: undefined | null | string | number | boolean; pink400: undefined | null | string | number | boolean; pink50: undefined | null | string | number | boolean; pink500: undefined | null | string | number | boolean; pink600: undefined | null | string | number | boolean; pink700: undefined | null | string | number | boolean; pink800: undefined | null | string | number | boolean; pink900: undefined | null | string | number | boolean; primary: undefined | null | string | number | boolean; purple100: undefined | null | string | number | boolean; purple200: undefined | null | string | number | boolean; purple300: undefined | null | string | number | boolean; purple400: undefined | null | string | number | boolean; purple50: undefined | null | string | number | boolean; purple500: undefined | null | string | number | boolean; purple600: undefined | null | string | number | boolean; purple700: undefined | null | string | number | boolean; purple800: undefined | null | string | number | boolean; purple900: undefined | null | string | number | boolean; red100: undefined | null | string | number | boolean; red200: undefined | null | string | number | boolean; red300: undefined | null | string | number | boolean; red400: undefined | null | string | number | boolean; red50: undefined | null | string | number | boolean; red500: undefined | null | string | number | boolean; red600: undefined | null | string | number | boolean; red700: undefined | null | string | number | boolean; red800: undefined | null | string | number | boolean; red900: undefined | null | string | number | boolean; rose100: undefined | null | string | number | boolean; rose200: undefined | null | string | number | boolean; rose300: undefined | null | string | number | boolean; rose400: undefined | null | string | number | boolean; rose50: undefined | null | string | number | boolean; rose500: undefined | null | string | number | boolean; rose600: undefined | null | string | number | boolean; rose700: undefined | null | string | number | boolean; rose800: undefined | null | string | number | boolean; rose900: undefined | null | string | number | boolean; secondary: undefined | null | string | number | boolean; teal100: undefined | null | string | number | boolean; teal200: undefined | null | string | number | boolean; teal300: undefined | null | string | number | boolean; teal400: undefined | null | string | number | boolean; teal50: undefined | null | string | number | boolean; teal500: undefined | null | string | number | boolean; teal600: undefined | null | string | number | boolean; teal700: undefined | null | string | number | boolean; teal800: undefined | null | string | number | boolean; teal900: undefined | null | string | number | boolean; text: undefined | null | string | number | boolean; text400: undefined | null | string | number | boolean; text500: undefined | null | string | number | boolean; transparent: undefined | null | string | number | boolean; trueGray100: undefined | null | string | number | boolean; trueGray200: undefined | null | string | number | boolean; trueGray300: undefined | null | string | number | boolean; trueGray400: undefined | null | string | number | boolean; trueGray50: undefined | null | string | number | boolean; trueGray500: undefined | null | string | number | boolean; trueGray600: undefined | null | string | number | boolean; trueGray700: undefined | null | string | number | boolean; trueGray800: undefined | null | string | number | boolean; trueGray900: undefined | null | string | number | boolean; violet100: undefined | null | string | number | boolean; violet200: undefined | null | string | number | boolean; violet300: undefined | null | string | number | boolean; violet400: undefined | null | string | number | boolean; violet50: undefined | null | string | number | boolean; violet500: undefined | null | string | number | boolean; violet600: undefined | null | string | number | boolean; violet700: undefined | null | string | number | boolean; violet800: undefined | null | string | number | boolean; violet900: undefined | null | string | number | boolean; warmGray100: undefined | null | string | number | boolean; warmGray200: undefined | null | string | number | boolean; warmGray300: undefined | null | string | number | boolean; warmGray400: undefined | null | string | number | boolean; warmGray50: undefined | null | string | number | boolean; warmGray500: undefined | null | string | number | boolean; warmGray600: undefined | null | string | number | boolean; warmGray700: undefined | null | string | number | boolean; warmGray800: undefined | null | string | number | boolean; warmGray900: undefined | null | string | number | boolean; white: undefined | null | string | number | boolean; yellow100: undefined | null | string | number | boolean; yellow200: undefined | null | string | number | boolean; yellow300: undefined | null | string | number | boolean; yellow400: undefined | null | string | number | boolean; yellow50: undefined | null | string | number | boolean; yellow500: undefined | null | string | number | boolean; yellow600: undefined | null | string | number | boolean; yellow700: undefined | null | string | number | boolean; yellow800: undefined | null | string | number | boolean; yellow900: undefined | null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; border?: [300 | 200 | 100 | "none" | 50 | (300 | 200 | 100 | "none" | 50)[], "transparent" | "primary" | "current" | "black" | "white" | "rose50" | "rose100" | "rose200" | "rose300" | "rose400" | "rose500" | "rose600" | "rose700" | "rose800" | "rose900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "fuchsia50" | "fuchsia100" | "fuchsia200" | "fuchsia300" | "fuchsia400" | "fuchsia500" | "fuchsia600" | "fuchsia700" | "fuchsia800" | "fuchsia900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "lightBlue50" | "lightBlue100" | "lightBlue200" | "lightBlue300" | "lightBlue400" | "lightBlue500" | "lightBlue600" | "lightBlue700" | "lightBlue800" | "lightBlue900" | "cyan50" | "cyan100" | "cyan200" | "cyan300" | "cyan400" | "cyan500" | "cyan600" | "cyan700" | "cyan800" | "cyan900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "emerald50" | "emerald100" | "emerald200" | "emerald300" | "emerald400" | "emerald500" | "emerald600" | "emerald700" | "emerald800" | "emerald900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "lime50" | "lime100" | "lime200" | "lime300" | "lime400" | "lime500" | "lime600" | "lime700" | "lime800" | "lime900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "amber50" | "amber100" | "amber200" | "amber300" | "amber400" | "amber500" | "amber600" | "amber700" | "amber800" | "amber900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "warmGray50" | "warmGray100" | "warmGray200" | "warmGray300" | "warmGray400" | "warmGray500" | "warmGray600" | "warmGray700" | "warmGray800" | "warmGray900" | "trueGray50" | "trueGray100" | "trueGray200" | "trueGray300" | "trueGray400" | "trueGray500" | "trueGray600" | "trueGray700" | "trueGray800" | "trueGray900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "coolGray50" | "coolGray100" | "coolGray200" | "coolGray300" | "coolGray400" | "coolGray500" | "coolGray600" | "coolGray700" | "coolGray800" | "coolGray900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "border" | "bodyBg" | "accent" | "secondary" | "text" | "text500" | "text400"] | Responsive<[300 | 200 | 100 | "none" | 50 | (300 | 200 | 100 | "none" | 50)[], "transparent" | "primary" | "current" | "black" | "white" | "rose50" | "rose100" | "rose200" | "rose300" | "rose400" | "rose500" | "rose600" | "rose700" | "rose800" | "rose900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "fuchsia50" | "fuchsia100" | "fuchsia200" | "fuchsia300" | "fuchsia400" | "fuchsia500" | "fuchsia600" | "fuchsia700" | "fuchsia800" | "fuchsia900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "lightBlue50" | "lightBlue100" | "lightBlue200" | "lightBlue300" | "lightBlue400" | "lightBlue500" | "lightBlue600" | "lightBlue700" | "lightBlue800" | "lightBlue900" | "cyan50" | "cyan100" | "cyan200" | "cyan300" | "cyan400" | "cyan500" | "cyan600" | "cyan700" | "cyan800" | "cyan900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "emerald50" | "emerald100" | "emerald200" | "emerald300" | "emerald400" | "emerald500" | "emerald600" | "emerald700" | "emerald800" | "emerald900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "lime50" | "lime100" | "lime200" | "lime300" | "lime400" | "lime500" | "lime600" | "lime700" | "lime800" | "lime900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "amber50" | "amber100" | "amber200" | "amber300" | "amber400" | "amber500" | "amber600" | "amber700" | "amber800" | "amber900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "warmGray50" | "warmGray100" | "warmGray200" | "warmGray300" | "warmGray400" | "warmGray500" | "warmGray600" | "warmGray700" | "warmGray800" | "warmGray900" | "trueGray50" | "trueGray100" | "trueGray200" | "trueGray300" | "trueGray400" | "trueGray500" | "trueGray600" | "trueGray700" | "trueGray800" | "trueGray900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "coolGray50" | "coolGray100" | "coolGray200" | "coolGray300" | "coolGray400" | "coolGray500" | "coolGray600" | "coolGray700" | "coolGray800" | "coolGray900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "border" | "bodyBg" | "accent" | "secondary" | "text" | "text500" | "text400"], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; display?: "none" | "flex" | "grid" | Falsy | "inherit" | "initial" | "revert" | "unset" | "contents" | "block" | "inline" | "table" | "inlineFlex" | "inlineGrid" | "inlineBlock" | "tableCell" | "tableRowGroup" | "tableRow" | "tableColumn" | "tableColumnGroup" | "tableHeader" | "tableHeaderGroup" | "tableFooterGroup" | "listItem" | "runIn" | Responsive<"none" | "flex" | "grid" | Falsy | "inherit" | "initial" | "revert" | "unset" | "contents" | "block" | "inline" | "table" | "inlineFlex" | "inlineGrid" | "inlineBlock" | "tableCell" | "tableRowGroup" | "tableRow" | "tableColumn" | "tableColumnGroup" | "tableHeader" | "tableHeaderGroup" | "tableFooterGroup" | "listItem" | "runIn", { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { block?: null | string | number | boolean; contents?: null | string | number | boolean; flex?: null | string | number | boolean; grid?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; inline?: null | string | number | boolean; inlineBlock?: null | string | number | boolean; inlineFlex?: null | string | number | boolean; inlineGrid?: null | string | number | boolean; listItem?: null | string | number | boolean; none?: null | string | number | boolean; revert?: null | string | number | boolean; runIn?: null | string | number | boolean; table?: null | string | number | boolean; tableCell?: null | string | number | boolean; tableColumn?: null | string | number | boolean; tableColumnGroup?: null | string | number | boolean; tableFooterGroup?: null | string | number | boolean; tableHeader?: null | string | number | boolean; tableHeaderGroup?: null | string | number | boolean; tableRow?: null | string | number | boolean; tableRowGroup?: null | string | number | boolean; unset?: null | string | number | boolean } | Responsive<{ block?: null | string | number | boolean; contents?: null | string | number | boolean; flex?: null | string | number | boolean; grid?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; inline?: null | string | number | boolean; inlineBlock?: null | string | number | boolean; inlineFlex?: null | string | number | boolean; inlineGrid?: null | string | number | boolean; listItem?: null | string | number | boolean; none?: null | string | number | boolean; revert?: null | string | number | boolean; runIn?: null | string | number | boolean; table?: null | string | number | boolean; tableCell?: null | string | number | boolean; tableColumn?: null | string | number | boolean; tableColumnGroup?: null | string | number | boolean; tableFooterGroup?: null | string | number | boolean; tableHeader?: null | string | number | boolean; tableHeaderGroup?: null | string | number | boolean; tableRow?: null | string | number | boolean; tableRowGroup?: null | string | number | boolean; unset?: null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; height?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; inset?: string | number | (string | number)[] | Responsive<string | number | (string | number)[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; maxHeight?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; maxWidth?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; minHeight?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; minWidth?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; pad?: 300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | (300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900")[] | Responsive<300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | (300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900")[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; position?: Falsy | "fixed" | "inherit" | "initial" | "revert" | "unset" | "absolute" | "relative" | "static" | "sticky" | Responsive<Falsy | "fixed" | "inherit" | "initial" | "revert" | "unset" | "absolute" | "relative" | "static" | "sticky", { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { absolute?: null | string | number | boolean; fixed?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; relative?: null | string | number | boolean; revert?: null | string | number | boolean; static?: null | string | number | boolean; sticky?: null | string | number | boolean; unset?: null | string | number | boolean } | Responsive<{ absolute?: null | string | number | boolean; fixed?: null | string | number | boolean; inherit?: null | string | number | boolean; initial?: null | string | number | boolean; relative?: null | string | number | boolean; revert?: null | string | number | boolean; static?: null | string | number | boolean; sticky?: null | string | number | boolean; unset?: null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; radius?: 300 | 200 | 100 | 400 | 500 | "none" | "primary" | "max" | (300 | 200 | 100 | 400 | 500 | "none" | "primary" | "max")[] | Responsive<300 | 200 | 100 | 400 | 500 | "none" | "primary" | "max" | (300 | 200 | 100 | 400 | 500 | "none" | "primary" | "max")[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; shadow?: 300 | 200 | 100 | 400 | 500 | 600 | 700 | "none" | "primary" | "inset" | "outline" | Falsy | Responsive<300 | 200 | 100 | 400 | 500 | 600 | 700 | "none" | "primary" | "inset" | "outline" | Falsy, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { 100: undefined | null | string | number | boolean; 200: undefined | null | string | number | boolean; 300: undefined | null | string | number | boolean; 400: undefined | null | string | number | boolean; 500: undefined | null | string | number | boolean; 600: undefined | null | string | number | boolean; 700: undefined | null | string | number | boolean; inset: undefined | null | string | number | boolean; none: undefined | null | string | number | boolean; outline: undefined | null | string | number | boolean; primary: undefined | null | string | number | boolean } | Responsive<{ 100: undefined | null | string | number | boolean; 200: undefined | null | string | number | boolean; 300: undefined | null | string | number | boolean; 400: undefined | null | string | number | boolean; 500: undefined | null | string | number | boolean; 600: undefined | null | string | number | boolean; 700: undefined | null | string | number | boolean; inset: undefined | null | string | number | boolean; none: undefined | null | string | number | boolean; outline: undefined | null | string | number | boolean; primary: undefined | null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; size?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; width?: string | number | Responsive<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; z?: 300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "max" | "min" | Falsy | Responsive<300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "max" | "min" | Falsy, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> | { 100: undefined | null | string | number | boolean; 200: undefined | null | string | number | boolean; 300: undefined | null | string | number | boolean; 400: undefined | null | string | number | boolean; 500: undefined | null | string | number | boolean; 600: undefined | null | string | number | boolean; 700: undefined | null | string | number | boolean; 800: undefined | null | string | number | boolean; 900: undefined | null | string | number | boolean; max: undefined | null | string | number | boolean; min: undefined | null | string | number | boolean } | Responsive<{ 100: undefined | null | string | number | boolean; 200: undefined | null | string | number | boolean; 300: undefined | null | string | number | boolean; 400: undefined | null | string | number | boolean; 500: undefined | null | string | number | boolean; 600: undefined | null | string | number | boolean; 700: undefined | null | string | number | boolean; 800: undefined | null | string | number | boolean; 900: undefined | null | string | number | boolean; max: undefined | null | string | number | boolean; min: undefined | null | string | number | boolean }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> }, compoundOptions?: CompoundStylesOptions) => string) & { styles: { amount: ResponsiveLazy<300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | (300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900")[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; bg: ResponsiveStyle<"transparent" | "primary" | "current" | "black" | "white" | "rose50" | "rose100" | "rose200" | "rose300" | "rose400" | "rose500" | "rose600" | "rose700" | "rose800" | "rose900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "fuchsia50" | "fuchsia100" | "fuchsia200" | "fuchsia300" | "fuchsia400" | "fuchsia500" | "fuchsia600" | "fuchsia700" | "fuchsia800" | "fuchsia900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "lightBlue50" | "lightBlue100" | "lightBlue200" | "lightBlue300" | "lightBlue400" | "lightBlue500" | "lightBlue600" | "lightBlue700" | "lightBlue800" | "lightBlue900" | "cyan50" | "cyan100" | "cyan200" | "cyan300" | "cyan400" | "cyan500" | "cyan600" | "cyan700" | "cyan800" | "cyan900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "emerald50" | "emerald100" | "emerald200" | "emerald300" | "emerald400" | "emerald500" | "emerald600" | "emerald700" | "emerald800" | "emerald900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "lime50" | "lime100" | "lime200" | "lime300" | "lime400" | "lime500" | "lime600" | "lime700" | "lime800" | "lime900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "amber50" | "amber100" | "amber200" | "amber300" | "amber400" | "amber500" | "amber600" | "amber700" | "amber800" | "amber900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "warmGray50" | "warmGray100" | "warmGray200" | "warmGray300" | "warmGray400" | "warmGray500" | "warmGray600" | "warmGray700" | "warmGray800" | "warmGray900" | "trueGray50" | "trueGray100" | "trueGray200" | "trueGray300" | "trueGray400" | "trueGray500" | "trueGray600" | "trueGray700" | "trueGray800" | "trueGray900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "coolGray50" | "coolGray100" | "coolGray200" | "coolGray300" | "coolGray400" | "coolGray500" | "coolGray600" | "coolGray700" | "coolGray800" | "coolGray900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "border" | "bodyBg" | "accent" | "secondary" | "text" | "text500" | "text400", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; border: ResponsiveLazy<[300 | 200 | 100 | "none" | 50 | (300 | 200 | 100 | "none" | 50)[], "transparent" | "primary" | "current" | "black" | "white" | "rose50" | "rose100" | "rose200" | "rose300" | "rose400" | "rose500" | "rose600" | "rose700" | "rose800" | "rose900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "fuchsia50" | "fuchsia100" | "fuchsia200" | "fuchsia300" | "fuchsia400" | "fuchsia500" | "fuchsia600" | "fuchsia700" | "fuchsia800" | "fuchsia900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "lightBlue50" | "lightBlue100" | "lightBlue200" | "lightBlue300" | "lightBlue400" | "lightBlue500" | "lightBlue600" | "lightBlue700" | "lightBlue800" | "lightBlue900" | "cyan50" | "cyan100" | "cyan200" | "cyan300" | "cyan400" | "cyan500" | "cyan600" | "cyan700" | "cyan800" | "cyan900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "emerald50" | "emerald100" | "emerald200" | "emerald300" | "emerald400" | "emerald500" | "emerald600" | "emerald700" | "emerald800" | "emerald900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "lime50" | "lime100" | "lime200" | "lime300" | "lime400" | "lime500" | "lime600" | "lime700" | "lime800" | "lime900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "amber50" | "amber100" | "amber200" | "amber300" | "amber400" | "amber500" | "amber600" | "amber700" | "amber800" | "amber900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "warmGray50" | "warmGray100" | "warmGray200" | "warmGray300" | "warmGray400" | "warmGray500" | "warmGray600" | "warmGray700" | "warmGray800" | "warmGray900" | "trueGray50" | "trueGray100" | "trueGray200" | "trueGray300" | "trueGray400" | "trueGray500" | "trueGray600" | "trueGray700" | "trueGray800" | "trueGray900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "coolGray50" | "coolGray100" | "coolGray200" | "coolGray300" | "coolGray400" | "coolGray500" | "coolGray600" | "coolGray700" | "coolGray800" | "coolGray900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "border" | "bodyBg" | "accent" | "secondary" | "text" | "text500" | "text400"], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; display: ResponsiveStyle<"none" | "flex" | "grid" | "inherit" | "initial" | "revert" | "unset" | "contents" | "block" | "inline" | "table" | "inlineFlex" | "inlineGrid" | "inlineBlock" | "tableCell" | "tableRowGroup" | "tableRow" | "tableColumn" | "tableColumnGroup" | "tableHeader" | "tableHeaderGroup" | "tableFooterGroup" | "listItem" | "runIn", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; height: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; inset: ResponsiveLazy<string | number | (string | number)[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; maxHeight: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; maxWidth: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; minHeight: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; minWidth: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; pad: ResponsiveLazy<300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900" | (300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "none" | "em100" | "em200" | "em300" | "em400" | "em500" | "em600" | "em700" | "em800" | "em900")[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; position: ResponsiveStyle<"fixed" | "inherit" | "initial" | "revert" | "unset" | "absolute" | "relative" | "static" | "sticky", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; radius: ResponsiveLazy<300 | 200 | 100 | 400 | 500 | "none" | "primary" | "max" | (300 | 200 | 100 | 400 | 500 | "none" | "primary" | "max")[], { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; shadow: ResponsiveStyle<300 | 200 | 100 | 400 | 500 | 600 | 700 | "none" | "primary" | "inset" | "outline", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; size: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; width: ResponsiveLazy<string | number, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }>; z: ResponsiveStyle<300 | 200 | 100 | 400 | 500 | 600 | 700 | 800 | 900 | "max" | "min", DesignTokens, { dark: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } }; light: { button: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; md: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; sm: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` }; xs: { fontSize: string; fontWeight: 500; padding: `${string} ${string}` } } }; color: { accent: string; bodyBg: string; border: string; primary: string; secondary: string; text: string; text400: string; text500: string }; iconButton: { color: { disabled: { bg: string; text: string }; primary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string }; secondary: { activeBg: string; activeText: string; bg: string; hoverBg: string; hoverText: string; text: string } }; size: { lg: { fontSize: string; padding: string }; md: { fontSize: string; padding: string }; sm: { fontSize: string; padding: string }; xs: { fontSize: string; padding: string } } }; shadow: { 100: "0 0 0 1px rgba(0, 0, 0, 0.05)"; 200: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; 300: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 400: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; 500: "0 0 15px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)"; 600: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; 700: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; none: "none"; outline: "0 0 3px 3px rgba(66, 153, 225, 0.5)"; primary: "0 0 12px -3px rgba(0, 0, 0, 0.2), 0 0 6px -2px rgba(0, 0, 0, 0.2)" } } }, { hover: "(hover: hover)"; lg: `only screen and (min-width: ${string}em)`; md: `only screen and (min-width: ${string}em)`; min: "only screen and (min-width: 0)"; retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; sm: `only screen and (min-width: ${string}em)`; xl: `only screen and (min-width: ${string}em)`; xs: `only screen and (min-width: ${string}em)` }> }; atomicCss: any; css: any }